<template>
	<view class="tabbar">
		<block v-for="(item, idx) in list" :key="idx">
			<view class="tab-item" @click="changeTab(item, idx)">
				<block v-if="idx==2">
					<view class="center-icon-box">
						<image class="item-icon" :src="item.iconPath"></image>
					</view>
				</block>
				<block v-else>
					<image class="item-icon" :src="idx==tabIdx?item.selectedIconPath:item.iconPath"></image>
				</block>
				<text class="item-text" :style="{color:idx==tabIdx?selectedColor:color}">{{item.text}}</text>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				color: "#9B9B9B",
				selectedColor: "#88BF00",
				list: [{
						pagePath: "/pages/index/index",
						text: "工作",
						iconPath: "/static/icon/icon-gongzuo.png",
						selectedIconPath: "/static/icon/icon-gongzuo-selected.png"
					},
					{
						pagePath: "/pages/page1",
						text: "助手",
						iconPath: "/static/icon/icon-zhushou.png",
						selectedIconPath: "/static/icon/icon-zhushou-selected.png"
					},
					{
						text: "常用",
						iconPath: "/static/icon/icon-plus.png",
					},
					{
						pagePath: "/pages/page2",
						text: "分析",
						iconPath: "/static/icon/icon-fenxi.png",
						selectedIconPath: "/static/icon/icon-fenxi-selected.png"
					},
					{
						pagePath: "/pages/page3",
						text: "我",
						iconPath: "/static/icon/icon-wo.png",
						selectedIconPath: "/static/icon/icon-wo-selected.png"
					}
				]
			}
		},
		methods: {
			changeTab(item, idx) {
				if(idx == 2) {
					
				} else {
					this.$store.commit('SET_TAB_IDX', idx)
					uni.switchTab({
						url: item.pagePath
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.tabbar {
		width: 100vw;
		height: 110rpx;
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: space-around;
		border-top: 1px solid #EEEEEE;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		background-color: #FFFFFF;

		.tab-item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.item-icon {
				width: 48rpx;
				height: 48rpx;
			}

			.item-text {
				font-size: 24rpx;
				margin-top: 10rpx;
				z-index: 9;
			}
			
			.center-icon-box {
				transform-origin: 50%, 100%;
				transform: scale(2) translateY(-6rpx);
				padding: 4rpx;
				padding-bottom: 0;
				background-color: #FFFFFF;
				border-radius: 50%;
				border-top: 1px solid #EEEEEE;
			}
		}
	}
</style>
